// 搜索盒子
#app {
    background-color: #f8f8f8;
}

.searchbox {
    margin: 0.32rem 0.3rem 0 0.3rem;
    width: 6.9rem;
    height: 0.6rem;
    display: flex;
    justify-content: space-between;
    background: white;
    border-radius: 0.28rem;
    line-height: 0.6rem;

    .search-input {
        width: 5rem;
        height: 3, 2rem;
        background: white;
    }
}

// 分类内容
.Category {
    margin-top: 0.1rem;
    padding: 0 0.14rem;
    display: flex;
    justify-content: space-between;

    .leftlist {
        width: 1.14rem;
        height: 82vh;
        overflow: scroll;
        padding-right: 0.26rem;
        background-color: white;

        .leftlis {
            margin-top: 0.72rem;
            padding: 0.1rem 0;
            font-size: 0.28rem;
            text-align: center;
            color: #808490;
        }
    }

    .rightcontent {
        width: 5.68rem;
        height: 90vh;
        background: white;
        overflow-y: scroll;

        // div {
        //     padding:0 .26rem;
        // }

        .img {
            width: 5.68rem;
            height: 1.4rem;
        }
    }

    .pdtitlelist {
        padding: 0.26rem;

        .titilelist {
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            // height: 1.8rem;
            width: 100%;
            overflow-x: auto;
            /* 允许横向滚动 */
            white-space: nowrap;
            /* 让子元素在一行内排列 */
            // overflow-x: hidden;

            .titlelis {
                width: 2rem;
                border-radius: 0.2rem;
                margin-right: 0.26rem;
                text-align: center;
                padding: 0 0.24rem;
                height: 0.52rem;
                line-height: 0.52rem;
                color: #000;
            }

            .active {
                // height: .30rem;
                background: #000;
                border-radius: .26 rem;
                color: #fff;
            }
        }
    }

    // 商品
    .goods {
        .goodsList {
            overflow-y: scroll;

            .goodsLis {
                margin-top: .12rem;
                border-radius: .1rem;
                background: #fff;
                padding: .16rem .12rem;

                .secondary {
                    display: flex;
                    justify-content: space-between;
                }

                .product {
                    margin-top: .2rem;

                    .productList {
                        // display: flex;
                        // justify-content: space-between;
                        // flex-wrap: wrap;
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        /* 三列等宽 */
                        grid-gap: 0.12rem;

                        /* 列和行之间的间隙 */
                        .productLis {
                            margin: auto;

                            .goodsName {
                                width: 1.2rem;
                                /* 限制容器宽度 */
                                display: -webkit-box;
                                /* 设置为WebKit内核的弹性盒子模型 */
                                -webkit-box-orient: vertical;
                                /* 垂直排列 */
                                -webkit-line-clamp: 2;
                                /* 限制显示两行 */
                                overflow: hidden;
                                /* 隐藏超出范围的内容 */
                                text-overflow: ellipsis;
                                /* 使用省略号 */
                                // border: 1px solid #ccc;
                            }

                            img {
                                width: 1.5rem;
                                height: 1.5rem;
                            }
                        }
                    }
                }
            }
        }


    }
}